<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>我的插件</title>
    <style>
        .relative {
            position: relative;
            min-height: 100px;
        }
    </style>
</head>
<body>
<cms-layout layout="main::admin/layout/master">
    <div id="app">
        <div class="bg-white rounded-lg shadow">
            <div class="p-4 border-b border-gray-200">
                <h2 class="text-xl font-semibold">我的插件</h2>
            </div>

            <div class="p-4">
                <el-button type="primary" @click="navigateToForm('')">上传插件</el-button>
                <br>
                <el-table :data="marketPlugins" border v-loading="marketLoading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading">
                    <!-- 表格列定义 -->
                    <el-table-column label="Logo" width="80">
                        <template slot-scope="scope">
                            <el-image
                                style="width: 40px; height: 40px"
                                :src="scope.row.logo || '/static/images/plugin-default.png'"
                                fit="contain">
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="插件名称" width="180"></el-table-column>
                    <el-table-column prop="version" label="版本" width="100"></el-table-column>
                    <el-table-column prop="author" label="作者" width="120"></el-table-column>
                    <el-table-column prop="type" label="类型" width="100"></el-table-column>
                    <el-table-column prop="description" label="描述"></el-table-column>
                    <el-table-column label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="primary"
                                @click="navigateToForm(scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!-- 分页组件 -->
            <div class="flex justify-center mt-4">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.page"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pagination.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
                </el-pagination>
            </div>
        </div>
    </div>
</cms-layout>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                marketPlugins: [],
                marketLoading: false,
                pagination: {
                    page: 1,
                    limit: 10,
                    total: 0
                }
            }
        },
        created() {
            this.loadMarketPlugins()
        },
        methods: {
            navigateToForm(plugin) {
                const url = (plugin != '') ? `/plugins/plugins-feature-plugin-market/admin/market/create?plugin_id=${plugin.pluginId}` : '/plugins/plugins-feature-plugin-market/admin/market/create';
                window.location.href = url;
            },
            loadMarketPlugins() {
                this.marketLoading = true;
                const { page, limit } = this.pagination;
                axios.get('/plugin-market/list', {
                    params: { page, limit }
                }).then(response => {
                    if (response.data.code === 0) {
                        this.marketPlugins = response.data.data;
                        this.pagination.total = response.data.count;
                    }
                }).finally(() => {
                    this.marketLoading = false;
                });
            },
            handleSizeChange(val) {
                this.pagination.limit = val;
                this.pagination.page = 1;
                this.loadMarketPlugins();
            },
            handleCurrentChange(val) {
                this.pagination.page = val;
                this.loadMarketPlugins();
            }
        }
    })
</script>
</body>
</html>